<template>
  <view>
    <view class="goods-list">
      <block v-for="(product, index) in productList" :key="index">
        <view class="goods-item" @click="goToProductDetail(product)">
          <!-- 商品左侧图片区域 -->
          <view class="goods-item-left">
            <image
              :src="product.goods_small_logo || defaultImage"
              class="goods-pic"
            ></image>
          </view>

          <!-- 商品右侧信息区域 -->
          <view class="goods-item-right">
            <!-- 商品标题 -->
            <view class="goods-name">{{ product.goods_name }}</view>
            <view class="goods-info-box">
              <!-- 商品价格 -->
              <view class="goods-price"
                >￥{{ product.goods_price | formatNum }}</view
              >
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 发请求需要携带的参数(提前处理好)
      params: {
        query: '',
        cid: '',
        pagenum: 1,
        pagesize: 20,
      },

      // 存储商品列表
      productList: [],

      // 总数
      total: 0,

      defaultImage:
        'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',

      // 记录当前是否在请求中
      isLoading: false,
    }
  },
  // 这里是没有vue-router  只能用小程序原生的获取参数的方式 通过onLOad
  onLoad(options) {
    console.log('>>>>>>', options)
    this.params.query = options.query || ''
    this.params.cid = options.cid || ''

    // 参数处理结束, 发请求
    this.getProductList()
  },

  onReachBottom() {
    // 达到你设置的onReachBottomDistance距离以后就会触发
    // console.log('我到底部了 还有200')

    // 进行其他操作之前, 需要判断 有没有多余数据了
    if (this.productList.length === this.total) {
      // 没有多余的数据了 => 啥也不干
      return this.$msg('我是有底线的')
    }

    // 发请求之前, 判断当前是否在请求中
    if (this.isLoading) {
      // 请求中, => 不用发请求了
      return
    }

    // 请求往后一页的数据
    this.params.pagenum += 1

    this.getProductList()
  },

  async onPullDownRefresh() {
    // 下拉了 执行
    // console.log('我被下拉了')
    // 页面刷新 => 数据刷新=> 重新发请求(第一页)
    // 页码重置
    this.params.pagenum = 1
    // 重置productList []
    this.productList = []

    // 发请求(异步)
    await this.getProductList()

    // 下拉刷新是固定时间消失!!希望是请求结束了, 就关闭
    // 等请求结束 关闭下拉刷新效果了
    uni.stopPullDownRefresh()
  },

  methods: {
    async getProductList() {
      // 记录了现在正在请求
      this.isLoading = true

      const { meta, message } = await this.$http.get(
        '/goods/search',
        this.params
      )
      // console.log(meta, message)
      if (meta.status !== 200) return this.$msg()

      // 移动端的上拉加载 应该是 之前的数据和现在数据 合并!!
      this.productList = [...this.productList, ...message.goods]
      this.total = message.total

      // 记录了当前已经结束请求了
      this.isLoading = false
    },

    goToProductDetail(product) {
      // console.log('跳转到详情', product)

      uni.navigateTo({
        url: `/pages_sub1/product-detail/product-detail?pid=${product.goods_id}`,
      })
    },
  },

  // filters: {
  //   // 数字 => 带两位小数的
  //   // {{ num | formatNum }}
  //   formatNum(value) {
  //     return Number(value).toFixed(2)
  //   },
  // },
}
</script>

<style scoped lang="scss">
.goods-item {
  display: flex;
  padding: 20rpx 10rpx;
  border-bottom: 1rpx solid #f0f0f0;

  .goods-item-left {
    margin-right: 10rpx;

    .goods-pic {
      width: 200rpx;
      height: 200rpx;
      display: block;
    }
  }

  .goods-item-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .goods-name {
      font-size: 26rpx;
    }

    .goods-price {
      font-size: 32rpx;
      color: #c00000;
    }
  }
}
</style>
